<template>
  <div>
    <head-top routerName="myOrderManagement" title="申请售后"></head-top>
    <div class="content-wrap">
      <goods-content :item="item"></goods-content>
      <div class="row">
        <div class="col" @click="$refs.sales.open = true">
          <svg-icon icon-class="Fill2" class-name="icon" />
          <div class="content">
            <div class="name">我要退款</div>
            <div class="label">
              商品与实物严重不符/没收到货/拍错了/我不想要了
            </div>
          </div>
          <van-icon name="arrow" />
        </div>
        <!-- <div class="col">
          <svg-icon icon-class="Fill" class-name="icon" />
          <div class="content">
            <div class="name">我要退款退货</div>
            <div class="label">商品与实物严重不符</div>
          </div>
          <van-icon name="arrow" />
        </div> -->
      </div>
    </div>
    <after-sales-modal ref="sales"></after-sales-modal>
  </div>
</template>
<script>
import HeadTop from "@/components/head";
import goodsContent from "./goods-content";
import { Image as VanImage, Loading, Icon } from "vant";
import "@/icons";
export default {
  components: {
    [VanImage.name]: VanImage,
    [Loading.name]: Loading,
    [Icon.name]: Icon,
    HeadTop,
    goodsContent,
    afterSalesModal: (resolve) => require(["./afterSalesModal"], resolve),
  },
  data() {
    return {
      item: this.$route.query,
    };
  },
  created() {},
  beforeRouteLeave(to, from, next) {
    if (this.$refs.sales.open) {
      this.$refs.sales.open = false;
      next(false);
    } else {
      next(true);
    }
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  .row {
    margin-top: 14px;
    .col {
      position: relative;
      padding: 14px 0;
      .icon {
        float: left;
        width: 25px;
        height: 25px;
        padding: 2px;
        display: block;
        box-sizing: content-box;
      }
      .content {
        padding-left: 35px;
        .name {
          height: 12px;
          font-size: 12px;
          font-weight: 500;
          color: #333333;
          line-height: 12px;
        }
        .label {
          margin-top: 6px;
          height: 11px;
          font-size: 11px;
          font-weight: 400;
          color: #999999;
          line-height: 11px;
        }
      }
      .van-icon {
        position: absolute;
        right: 0;
        top: 16px;
        width: 24px;
        height: 24px;
        font-size: 18px;
        line-height: 24px;
        text-align: center;
      }
      &:first-child {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>